<template>
  <div class="questionHeader">
    <div class="filterColumn">
      <el-input
        placeholder="问卷标题"
        v-model.trim="title"
        class="filterColumn_title"
      ></el-input>

      <span class="filterColumn_span">
        <el-date-picker
          v-model="startDate"
          align="right"
          type="datetime"
          placeholder="开启时间"
          class="filterColumn_date"
        ></el-date-picker>

        <el-date-picker
          v-model="endDate"
          align="left"
          type="datetime"
          placeholder="截止时间"
          class="filterColumn_date"
        ></el-date-picker>
      </span>

      <el-select
        v-model="status"
        placeholder="状态"
        class="filterColumn_status"
      >
        <el-option value="已保存"></el-option>
        <el-option value="待开启"></el-option>
        <el-option value="已开启"></el-option>
        <el-option value="已关闭"></el-option>
      </el-select>

      <el-button
        class="filterColumn_button filterColumn_button_select"
        @click="pageQuestion"
      >
        查询
      </el-button>
      <el-button
        class="filterColumn_button filterColumn_button_reset"
        @click="reset"
      >
        重置
      </el-button>
      <el-button
        class="filterColumn_button_addQuestion"
        @click="addSubmitQuestion"
      >
        新增问卷
      </el-button>

      <!-- <input id="b" type="file" webkitdirectory /> -->
    </div>
  </div>
</template>

<script>
import { pageQuestion } from '@/api/question/index.js'
//引入 coment 组件
import moment from 'moment'

export default {
  name: 'QuestionHeader',
  updated() {
    console.log(this.status)
  },
  data() {
    return {
      title: '',
      startDate: '',
      endDate: '',
      status: '',
    }
  },
  methods: {
    //! 条件查询问卷
    pageQuestion() {
      let queData = {
        current: 1,
        title: this.title,
      }

      //* 判断时间是否为空
      if (this.startDate !== '') {
        if (this.startDate !== null) {
          queData.startTime = moment(this.startDate).format(
            'YYYY-MM-DD HH:mm:ss'
          )
        }
      }
      if (this.endDate !== '') {
        if (this.endDate !== null) {
          queData.endTime = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss')
        }
      }

      //* 判断当前的状态
      if (this.status === '已保存') {
        queData.status = 1
        queData.close = 2
      } else if (this.status === '待开启') {
        queData.status = 2
        queData.close = 2
      } else if (this.status === '已开启') {
        queData.status = 2
        queData.close = 1
      } else if (this.status === '已关闭') {
        queData.status = 2
        queData.close = 0
      }

      pageQuestion(queData).then((res) => {
        console.log(res.data, '条件查询')
        this.$emit('condition-query', res.data)
      })
    },

    //! 重置
    reset() {
      this.title = ''
      this.startDate = ''
      this.endDate = ''
      this.status = ''
      this.$emit('reset')
    },

    addSubmitQuestion() {
      //跳转添加问卷的页面
      this.$router.push({
        path: '/question/questionAdd',
      })
    },
  },
}
</script>

<style scoped>
.filterColumn {
  height: 46px;
  background-color: white;
  line-height: 46px;
  position: relative;
  border: 1px solid lightgrey;
}
.filterColumn_title {
  width: 200px;
  margin-left: 20px;
}
.filterColumn_date {
  width: 200px;
  margin-left: 20px;
}
.filterColumn_status {
  width: 200px;
}
.filterColumn_status {
  margin-left: 20px;
}
.filterColumn_button {
  margin-left: 20px;
}
.filterColumn_button_addQuestion {
  position: absolute;
  right: 20px;
  top: 5px;
}
.filterColumn_button_select,
.filterColumn_button_addQuestion {
  background-color: rgb(59, 81, 185);
  color: white;
}
.filterColumn_button_reset {
  color: white;

  background-color: orange;
}
</style>


<style>
/* .filterColumn_span .filterColumn_span {
  position: relative;
  left: 170px;
} */
.filterColumn_span .el-input__prefix {
  width: 0;
  height: 0;
}
.filterColumn_span .el-input__suffix {
  display: none;
}
.filterColumn_span .el-icon-time:before {
  content: '\e78e';
  position: relative;
  left: 165px;
  top: 1px;
  font-size: 17.5px;
}

/* "\e78e" */
</style>
